<template>
    <div>
        <h1>地址列表</h1>

        <el-table :data="list" style="width: 100%" v-if="bol">
            <el-table-column fixed prop="id" label="id" width="120" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="area" label="区域" width="200" />
            <el-table-column prop="address" label="详细地址"  width="600" />
            <el-table-column prop="tel" label="电话"   />
            <el-table-column prop="tips" label="备注"  />
            <el-table-column prop="bol" label="默认地址"  />
            <el-table-column label="默认地址" >
                <template #default="scope">
                    <el-button v-if="scope.row.bol==0" link type="primary" size="small" @click="setMo(scope.row.id)">设为默认地址</el-button>
                    <span v-else>默认地址</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small">编辑</el-button>               
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <table border="1" v-if="bol">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>区域</th>
                <th>详细地址</th>
                <th>手机号</th>
                <th>备注</th>
                <th></th>
                <th>操作</th>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.area }}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.tel }}</td>
                <td>{{ item.tips }}</td>
                <td>{{ item.bol>0?'默认地址':'不是默认地址' }}</td>
                <td>
                    <button>编辑</button>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
        </table> -->
        <div v-else>
            <p>还没有地址，<router-link to="/add">新增地址</router-link></p>
        </div>
        <el-pagination 
        background 
        layout="prev, pager, next" 
        :total="total" 
        :page-size="currNum"
        @current-change="changePage"
        />
    </div>
</template>

<script setup>
import axios from 'axios';
// import axoios from 'axios';
import { ref,reactive,onMounted } from 'vue';

let bol = ref(false);
let list = ref([]);

//设置总页数
let total = ref(0);

//设置分页数据
let currPage = ref(1);//设置当前第几页
let currNum  = ref(3);//设置一页多少条数据

//获取总页数
let getTotal = ()=>{
    axios.get('/api/getTotal').then(res=>{
        console.log(res.data.data[0]['count(*)']);
        //获取总页数
        let num = res.data.data[0]['count(*)'];
        total.value = num;
    });
};


//参数 page是当前页数，num是每页条数
let getData = (page,num)=>{
    axios.get(`/api/getAddress/${page}/${num}`).then(res=>{
        console.log(res.data);
        //判断返回的数据内容，如果数据长度为0，则返回false，显示空数据状态，否则返回true，显示列表状态
        if(res.data.length){
            bol.value=true;
            list.value = res.data;
        }else{
            bol.value=false;
        }
        list.value=(res.data);
    });
};
let del = (n)=>{
    axios.post('/api/del',{
        id:n
    }).then(res=>{
        console.log(res.data);
    });
    getData();
}
onMounted(()=>{
    getData(currPage.value,currNum.value);
    getTotal();
});

//设为默认地址

let setMo = (id)=>{
    console.log(id);
    axios.post('/api/setMo',{id}).then(res=>{
        console.log(res.data);
        getData();
    });
    
};


//点击分页
let  changePage = (p)=>{
    console.log(p);
    currPage.value=p;
    getData(currPage.value,currNum.value);
};
</script>

<style lang="scss" scoped>


</style>